<link rel="stylesheet" href="../css/public_index.css">

<!-- 顶部提醒 -->
<div class="cautionioc" id="a1">
    <style>
        .cautionioc {
            background: url(http://o.bookschina.com/images/cautionioc.png) left center no-repeat;
            padding-left: 20px;
            width: 1180px;
            margin: 0 auto;
        }
        .cautionioc a {
            font-family: "宋体";
            font-size: 12px;
            margin: 0;
            padding: 0;
            border: 0;
            width: 100%;
            height: 30px;
            line-height: 30px;
            color: #666666;
        }
    </style>
    <a href="/notice/200727fzp.asp" target="_blank">近日，我司接到多起举报，有不法分子使用我公司名义以对外提供刷单业务等形式实施网络诈骗，我司严正声明，从未以任何方式组织开展刷单业务，亦未授权任何单位、个人开展上述业务，请谨防诈骗 &gt;&gt;</a>
</div>



<!-- 开始动画 -->
<div class="imgTop-box">
    <style>
        .imgTop-box {
        width: 1200px;
        height: 500px;
        margin: auto;
        overflow: hidden;
        }
        .imgTop-box .imgTop-box-d img {
        position: absolute;
        z-index: -1;
        }
        .imgTop-box .imgTop-box-d .i1 {
        opacity: 0;
        }
        .imgTop-box .imgTop-box-d .i1 {
        opacity: 1;
        }
    </style>
    <div class="imgTop-box-d">
        <img class="i1" src="img/topx.jpg" alt="" >
        <img class="i2" src="img/topd.jpg" alt="" >
    </div>
    <div></div>
</div>




<!-- 登录注册 -->
<div class="zhuce">
    <style>
        .zhuce {
            width: 1200px;
            margin: auto;
            zoom: 1;
            display: block;
        }
        .zhuce .loginArea {
            float: left;
            font-family: "宋体";
            font-size: 12px;
            line-height: 30px;
            color: #666666;
            font-weight: normal;
            list-style: none;
            display: none;
            zoom: 1;
            
        }
        .zhuce .loginArea1 {
            float: left;
            font-family: "宋体";
            font-size: 12px;
            line-height: 30px;
            color: #666666;
            font-weight: normal;
            list-style: none;
            display: block;
            zoom: 1;
        }
        .zhuce .webTool {
            float: right;
            display: block;
            padding-right: 50px;
            position: relative;
        }
        .zhuce .webTool .zhul {
            background: #fff;
            position: absolute;
            left: 185px;
            top: 28px;
            z-index: 10;
            display: none;
            border: 1px black solid;
        }
        .zhuce .webTool .zhul ul {
            width: 180px;
        }
        .zhuce .webTool .zhul ul li {
            width: 80px;
            float: left;
        }
        .zhuce .webTool .zhul ul li a {
            color: black;
        }
        .zhuce .webTool ul {
            list-style: none;
        }
        .zhuce .webTool ul li {
            float: left;
            padding: 0 5px;
            width: 80px;
        }
        .zhuce .webTool ul li div {
            position: relative;
            z-index: 11;
        }
        .zhuce .webTool ul li div a {
            list-style: none;
            text-decoration: none;
        }
        .zhuce .webTool ul li div .icon {
            position: absolute;
            background: url(../img/jlt.png) no-repeat;
            width: 16px;
            height: 8px;
            background-position: -26px -427px;
            line-height: 30px;
            top: 10px;
        }

    </style>
    <!-- 顶端左侧 -->
    <div class="loginArea">
        <b>欢迎光临中图网&nbsp;请</b>
        <a href="../logon.html">登录</a>
        <span>|</span>
        <a href="../register.html">注册</a>
    </div>
    <div class="loginArea1">
        欢迎<span>xxx</span>光临中图网&nbsp;<spann class="loginArea1-s2">退出</spann>
    </div>

    <!-- 顶端右侧 -->
    <div class="webTool">
        <div class="zhul">
            <ul>
                <li><a href="./personal.html">我的收藏夹</a></li>
                <li><a href="./personal.html">账户余额</a></li>
                <li><a href="./personal.html">我的优惠券</a></li>
                <li><a href="./personal.html">我的书币</a></li>
                <li><a href="./personal.html">收货地址</a></li>
                <li><a href="./personal.html">我的书评</a></li>
                <li><a href="./personal.html">我的消息</a></li>
                <li><a href="./personal.html">书币换券</a></li>
            </ul>
        </div>
        <ul>
            <li>
                <div>
                    <a href="../shoppingCart.html">购物车</a>
                    <!-- <a href="##" class="icart">购物车</a> -->
                </div>
            </li>
            <li>
                <div>
                    <a href="#">我的订单</a>
                </div>
            </li>
            <li>
                <div id="zhanghu">
                    <!-- <a href="./personal.html" >我的账户</a> -->
                    <a href="./personal.html" class="zhanghu">我的账户</a>
                    <b class="icon"></b>
                </div>
            </li>
            <li>
                <div>
                    <a href="#">帮助中心</a>
                </div>
            </li>
            <li>
                <div>
                <a href="#">商家中心</a>
                <b class="icon"></b>
            </div></li>
            <li>
                <div>
                    <a href="#">手机中图网</a>
                    <b class="icon"></b>
                </div>
            </li>
        </ul>

    </div>
</div>

<!-- logo行 -->
<div class="searchBarFixed">
    <!-- 搜索框 -->
    
    <div class="w1200 searchBarFixedBox">
        <!-- logo -->
        <div class="logo">
            <a href="../index.html">
                <img src="img/logo.png" alt="">
            </a>
        </div>
        <!-- 搜索区域 -->
        <div class="searchArea">
            <!-- 搜索框 -->
            <div class="clearfix">
                <!-- 框 -->
                <div class="searchFrom">
                    <!-- <span class="s1">朱元璋</span> -->
                    <input class="s1" id="search" type="text" value="" placeholder="朱元璋">
                    
                    <div class="ds">
                        <span class="s2">搜索全部</span>
                        <span class="s3"></span>
                    </div>
                    <span class="s4">搜索</span>
                </div>

                <!-- <script>
                      const otxt = document.getElementById("search");
const obtn = document.querySelector(".s4");
const oul = document.querySelector(".list");

// 点击按钮，跳转到真实的百度搜索
obtn.onclick = function(){
location.href = "https://www.baidu.com/s?wd=" + otxt.value;
}

otxt.oninput = function(){

// 判断输入框是否为空，为空，清除下拉菜单
if(this.value === "") oul.innerHTML = "";
oul.style.display = "block"
// console.log(this.value)
// 开启jsonp请求，请求百度数据
jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",function(res){
    // 请求成功后，处理数据
    // console.log(res.s);
    let str = "";
    // 拼接页面结构
    for(let i=0;i<res.s.length;i++){
        str += `<li>${res.s[i]}</li>`
    }
    // 渲染页面
    // console.log(str)
    oul.innerHTML = str;


    oul.onmouseover = function(eve){
        const e = eve?eve:window.event;
        const tag = e.target || ev.srcElement;
        // console.log(tag.nodeName);
        if(tag.nodeName == "LI"){
            tag.style.color = "red";
            // console.log(tag.innerHTML);
            tag.onclick = function(){
                otxt.value = tag.innerHTML;
                oul.style.display="none";
            }
        }
    }
    oul.onmouseout = function(eve){
        const e = eve?eve:window.event;
        const tag = e.target || ev.srcElement;
        // console.log(tag.nodeName);
        if(tag.nodeName == "LI"){
            tag.style.color = "black";
        }
    }
},{
    wd:this.value,
    cb:"ajshdfgausdf",
    selfName:"cb"
})
}





function jsonp(url,cb,data){
let str = "";
for(let i in data){
    str += `${i}=${data[i]}&`
}
url += "?" + str + "_qft_=" + Date.now();
const script = document.createElement("script");
script.src = url;
document.body.appendChild(script);

window[data[data.selfName]] = function(res){
    cb(res);
}
}
                </script> -->
                <!-- 高级搜索 -->
                <div class="moreSearch">
                    高级搜索
                </div>

                
            </div>
            <!-- 推荐 -->
            <div class="hotWore">
                <a href="#">许渊冲</a>
                <a href="#">何兆武</a>
                <a href="#">新人指南|必买书单</a>
                <a href="#">新人指南|特色书单</a>
                <a href="#">王小波纪念书单</a>
                <a href="#">下单1本·整本包邮</a>
            </div>
        </div>
        <div class="notice">
            <div class="notice1">
                <span class="notice1s1"></span>
                <span class="notice1s2">这里是一些提示信息</span>
            </div>

        </div>
    </div>
    <ul class="list"></ul>
    <style>
        .searchBar .searchBarFixed {
  width: 100%;
  height: 111px;
  background-color: #fff;
  /* position: relative; */
}
.searchBar .searchBarFixed .list {
  position: relative;
  /* left: 640px; */
  /* top: 130px; */
  z-index: 400;
  list-style: none;
  left: 620px;
  top:-50px
}
.searchBar .searchBarFixed .list li {
    width: 500px;
  background: rgba(255, 255, 255,0.8);
  padding: 5px 10px;
}
.searchBar .searchBarFixed .searchBarFixedBox {
  zoom: 1;
  display: block;
  height: 111px;
  position: relative;
}
.searchBar .searchBarFixed .searchBarFixedBox .logo {
  width: 248px;
  height: 111px;
  padding: 21px 0 25px;
  margin-right: 26px;
  float: left;
  box-sizing: border-box;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea {
  width: 673px;
  height: 68px;
  float: left;
  margin-top: 20px ;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix {
  width: 673px;
  height: 40px;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .searchFrom {
  width: 610px;
  height: 40px;
  border: red 1px solid;
  float: left;
  box-sizing: border-box;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .searchFrom .s1 {
  width: 406px;
  height: 27px;
  padding: 5px 0;
  line-height: 24px;
  font-family: "宋体";
  font-size: 12px;
  line-height: 30px;
  color: #666666;
  font-weight: normal;
  padding-left: 13px;
  display: block;
  float: left;
  border: 1px solid red;
  outline-color: orange;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .searchFrom .s1 :focus {
  border: orange 1px solid;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .searchFrom .ds {
  width: 100px;
  height: 40px;
  border-left: solid #666 1px;
  display: block;
  float: left;
  text-align: center;
  line-height: 35px;
  box-sizing: border-box;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .searchFrom .ds .s2 {
  font-family: "宋体";
  font-size: 12px;
  line-height: 30px;
  color: #666666;
  font-weight: normal;
  width: 80px;
  height: 40px;
  display: block;
  float: left;
  margin-top: 4px;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .searchFrom .ds .s3 {
  margin-top: 18px;
  width: 7px;
  height: 4px;
  background: url(../img/jlt.png) no-repeat;
  background-position: 0px -10px;
  display: block;
  float: left;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .searchFrom .s4 {
  width: 87px;
  height: 38px;
  background-color: red;
  color: #fff;
  font-size: 12px;
  display: block;
  float: left;
  text-align: center;
  line-height: 38px;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .clearfix .moreSearch {
  width: 48px;
  line-height: 40px;
  font-family: "宋体";
  font-size: 12px;
  line-height: 30px;
  color: #666666;
  font-weight: normal;
  height: 40px;
  color: red !important;
  float: left;
  margin-left: 13px;
  padding-top: 3px;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .hotWore {
  width: 673px;
  height: 28px;
}
.searchBar .searchBarFixed .searchBarFixedBox .searchArea .hotWore a {
  margin-right: 10px;
  font-size: 14px;
  text-decoration: none;
  color: #999;
}
.searchBar .searchBarFixed .searchBarFixedBox .notice {
  width: 168px;
  height: 40px;
  display: block;
  float: left;
  margin-left: 20px;
}
.searchBar .searchBarFixed .searchBarFixedBox .notice .notice1 {
  width: 150px;
  height: 40px;
  box-sizing: border-box;
  padding-top: 10px;
  margin-top: 20px;
}
.searchBar .searchBarFixed .searchBarFixedBox .notice .notice1 .notice1s1 {
  width: 23px;
  height: 23px;
  background: url(../img/jlt.png) no-repeat;
  background-position: 0px -27px;
  display: block;
  float: left;
  padding-right: 10px;
  margin-top: 5px;
}
.searchBar .searchBarFixed .searchBarFixedBox .notice .notice1 .notice1s2 {
  width: 112px;
  height: 40px;
  display: block;
  float: left;
  margin: auto 0 ;
  color: red;
}
    </style>
</div>

<!-- 导航栏 -->
<div class="nav1" id="a2">
    <span class="navleft">
        <span class="img"></span><span class="navlefts">图书分类</span><span class="img2"></span>
    </span>
    <div class="navright">
        <ul>
            <li>首页</li>
            <li>淘书团</li>
            <li><span class="li1"></span>今日值得买</li>
            <li><span class="li2"></span>五星书</li>
            <li>畅销榜</li>
            <li>9块9包邮</li>
            <li>出版社浏览</li>
            <li>闲情雅趣</li>
            <li>批发</li>
            <li>付费资讯</li>
        </ul>
    </div>
    <style>
        .nav .nav1 {
            width: 1200px;
            margin: auto;
            zoom: 1;
            display: block;
            height: 44px;
            width: 1200px;
            position: relative;
        }
        .nav .nav1 .navleft {
            width: 200px;
            height: 44px;
            background: red;
            display: block;
            margin-right: 0px;
            position: absolute;
            left: 0;
            line-height: 42px;
            padding-left: 10px;
            box-sizing: border-box;
        }
        .nav .nav1 .navleft .img {
            background: url("../img/jlt.png");
            width: 16px;
            height: 16px;
            background-position: -9px 0px;
            display: inline-block;
            padding: 0px 10px;
        }
        .nav .nav1 .navleft .navlefts {
            color: #fff;
            margin-right: 50px;
        }
        .nav .nav1 .navleft .img2 {
            background: url("../img/jlt.png");
            display: inline-block;
            width: 13px;
            height: 8px;
            background-position: -4px -428px;
        }
        .nav .nav1 .navright {
            width: 1000px;
            height: 42px;
            display: block;
            clear: both;
            float: right;
            background-color: #fff;
            position: absolute;
            left: 200px;
            line-height: 46px;
        }
        .nav .nav1 .navright ul {
            list-style: none;
            float: left;
            width: auto;
        }
        .nav .nav1 .navright ul li {
            width: auto;
            white-space: nowrap;
            padding: 0px 16px;
            float: left;
        }
        .nav .nav1 .navright ul li .li1 {
            background: url("../img/jlt.png");
            background-position: -135px -182px;
            width: 18px;
            height: 18px;
            display: inline-block;
            padding-right: 3px;
        }
        .nav .nav1 .navright ul li .li2 {
            background: url("../img/jlt.png");
            background-position: 0px -386px;
            width: 13px;
            height: 13px;
            display: inline-block;
            padding-right: 3px;
        }
    </style>
</div>

 <!-- --------底部-------- -->
<div class="bottom" id="a4">
    <div class="bottom-top">
        <div class="bottom-top-left">
            <div class="bottom-top-left-d">
                <span class="bottom-top-left-s">新手上路</span>
                <ul class="bottom-top-left-u">
                    <li class="bottom-top-left-l">新用户指引</li>
                    <li class="bottom-top-left-l">注册用户 更改注册信息</li>
                    <li class="bottom-top-left-l">购物常见问题</li>
                    <li class="bottom-top-left-l">关于特价书的常见问题</li>
                </ul>
            </div>

            <div class="bottom-top-left-d">
                <span class="bottom-top-left-s">购买问题</span>
                <ul class="bottom-top-left-u">
                    <li class="bottom-top-left-l">付款方式</li>
                    <li class="bottom-top-left-l">账户余额  申请提现</li>
                    <li class="bottom-top-left-l">配送方式及费用、范围</li>
                    <li class="bottom-top-left-l">集团购买</li>
                </ul>
            </div>

            <div class="bottom-top-left-d">
                <span class="bottom-top-left-s">售后服务</span>
                <ul class="bottom-top-left-u">
                    <li class="bottom-top-left-l">退换货流程</li>
                    <li class="bottom-top-left-l">投诉与建议</li>
                    
                </ul>
            </div>

            <div class="bottom-top-left-d">
                <span class="bottom-top-left-s">特色服务</span>
                <ul class="bottom-top-left-u">
                    <li class="bottom-top-left-l">会员等级与书币</li>
                    <li class="bottom-top-left-l">中图网书馨卡</li>
                    <li class="bottom-top-left-l">邮件订阅</li>
                    <li class="bottom-top-left-l">邀请好友购买返10元</li>
                </ul>
            </div>

            <div class="bottom-top-left-d">
                <span class="bottom-top-left-s">其他信息</span>
                <ul class="bottom-top-left-u">
                    <li class="bottom-top-left-l">本站简介</li>
                    <li class="bottom-top-left-l">联系我们</li>
                    <li class="bottom-top-left-l">招聘英才</li>
                    <li class="bottom-top-left-l">网站联盟</li>
                    <li class="bottom-top-left-l">友情链接</li>
                </ul>
            </div>
            
        </div>
        <div class="bottom-top-right">
            <div class="bottom-top-right-d1">
                <span class="bottom-top-right-s">微信公众号</span>
                <img src="http://o.bookschina.com/images/weixinerweima.jpg" class="bottom-top-right-i" alt="">
            </div>

            <div class="bottom-top-right-d1">
                <span class="bottom-top-right-s">中图网微博</span>
                <img src="http://o.bookschina.com/images/weiboerweima.jpg" class="bottom-top-right-i" alt="">
            </div>

            <div class="bottom-top-right-d1">
                <span class="bottom-top-right-s">手机中图网</span>
                <img src="http://o.bookschina.com/images/phoneerweima.jpg" class="bottom-top-right-i" alt="">
            </div>
        </div>
    </div>
    <div class="bottom-center1">
        <span class="bottom-center1-s">友情链接:</span>
        <a href="#"  class="bottom-center1-a">
            国家公务员考试网</a>
        <a href="#"  class="bottom-center1-a">
            孔夫子旧书网</a>
        <a href="#"  class="bottom-center1-a">
            邮票</a>
        <a href="#"  class="bottom-center1-a">
            事业单位招聘考试网</a>
        <a href="#"  class="bottom-center1-a">
            考研网</a>
        
            
    </div>
    <div class="bottom-center2">
        <img src="http://o.bookschina.com/pc/images/footbannr.jpg" alt="">
    </div>
    <div class="bottom-bottom">
        <div class="bottom-bottom-l">
            <a href="#"><img src="http://o.bookschina.com/images/chengxin.jpg" alt=""></a>
            <a href="#"><img src="	http://o.bookschina.com/images/ectrust.gif" alt=""></a>
        </div>
        <div class="bottom-bottom-r">
            <p><a href="#">京ICP备09013606号-3</a><a href="#">京信市监发[2002]122号</a><span>海淀公安分局备案编号：1101083394</span></p>
            <p><a href="#">营业执照</a><a href="#">出版物经营许可证 京出发京批字第直110071</a></p>
        </div>

    </div>
    <style>
        .bottom-box .bottom {
  width: 1200px;
  height: 414px;
  margin: auto;
  background-color: #f5f5f5;
}
.bottom-box .bottom .bottom-top {
  width: 1200px;
  height: 196px;
  padding-top: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.bottom-box .bottom .bottom-top .bottom-top-left {
  width: 890px;
  height: 176px;
  border-right: red solid 1px;
  box-sizing: border-box;
  float: left;
}
.bottom-box .bottom .bottom-top .bottom-top-left .bottom-top-left-d {
  width: 177px;
  padding-left: 10px;
  float: left;
  box-sizing: border-box;
}
.bottom-box .bottom .bottom-top .bottom-top-left .bottom-top-left-d .bottom-top-left-s {
  font-weight: 600;
}
.bottom-box .bottom .bottom-top .bottom-top-left .bottom-top-left-d .bottom-top-left-u {
  list-style: none;
  margin-top: 10px;
}
.bottom-box .bottom .bottom-top .bottom-top-left .bottom-top-left-d .bottom-top-left-l {
  padding: 3px 0;
}
.bottom-box .bottom .bottom-top .bottom-top-right {
  width: 300px;
  height: 196px;
  float: left;
}
.bottom-box .bottom .bottom-top .bottom-top-right .bottom-top-right-d1 {
  width: 77px;
  height: 110px;
  text-align: center;
  margin-left: 10px;
  padding-top: 10px;
  float: left;
}
.bottom-box .bottom .bottom-top .bottom-top-right .bottom-top-right-d1 .bottom-top-right-s {
  font-size: 12px;
}
.bottom-box .bottom .bottom-top .bottom-top-right .bottom-top-right-d1 .bottom-top-right-i {
  padding-top: 10px;
}
.bottom-box .bottom .bottom-center1 {
  width: 1200px;
  height: 43px;
  border-top: solid 1px #aaa;
  border-bottom: solid 1px #aaa;
  line-height: 42px;
  padding-left: 20px;
  box-sizing: border-box;
}
.bottom-box .bottom .bottom-center1 .bottom-center1-s {
  font-weight: 600;
}
.bottom-box .bottom .bottom-center1 .bottom-center1-a {
  padding-left: 10px;
  color: #111;
}
.bottom-box .bottom .bottom-center2 {
  width: 1200px;
  height: 108px;
}
.bottom-box .bottom .bottom-bottom {
  width: 1200px;
  height: 46px;
}
.bottom-box .bottom .bottom-bottom .bottom-bottom-l {
  float: left;
  margin-left: 250px;
}
.bottom-box .bottom .bottom-bottom .bottom-bottom-r {
  float: left;
}
.bottom-box .bottom .bottom-bottom .bottom-bottom-r a {
  color: black;
  font-size: 12px;
  margin: 0 5px;
}
.bottom-box .bottom .bottom-bottom .bottom-bottom-r span {
  color: black;
  font-size: 12px;
}
    </style>
</div>




